<template>
  <div>
    <div style="margin: 10px 0">普通：</div>
    <div style="border: 1px solid #ccc;">
      <CloudTree
        :treeData="treeData"
        :defaultExpandAll="true"
        :checkable="true"
      ></CloudTree>
    </div>
    <div style="margin: 10px 0">宽松型：</div>
    <div style="border: 1px solid #ccc">
      <CloudTree
        :isLoose="true"
        :treeData="treeData"
        :defaultExpandAll="true"
        :checkable="true"
      ></CloudTree>
    </div>
  </div>
</template>

<script>
export default {
  title: '2.可选择(checkable)  ',
  subTitle: '可勾选，可选中',
  data() {
    return {
      treeData: [{
        title: 123,
        key: 123,
        isParent: true,
        children: [{
          title: '456456456',
          key: 456,
          iconName: 'table',
          children: [{
            title: '999999',
            key: 999
          }, {
            title: 99,
            key: 99
          }]
        }, {
          title: 789,
          key: 789,
          iconName: 'table'
        }, {
          title: 111,
          key: 111,
          iconName: 'table'
        }, {
          title: 222,
          key: 222,
          iconName: 'table'
        }, {
          title: 333,
          key: 333,
          iconName: 'table'
        }]
      }]
    }
  },
  methods: {

  }
}
</script>

<style lang="scss">
</style>